<template>
  <div>
    <van-nav-bar :title="this.$route.query.title" left-arrow @click-left="onClickLeft" />
    <!-- 下拉菜单 -->
    <van-sticky>
      <van-dropdown-menu active-color="#3190e8">
        <!-- 食品 -->
        <van-dropdown-item v-model="dropdownValue" :options="CategoryList" @change="getRestaurants"></van-dropdown-item>
        <!-- 排序 -->
        <van-dropdown-item
          v-model="dropdownValue2"
          :options="orderOptions"
          @change="getRestaurants"
        />
        <!-- 筛选 -->
        <van-dropdown-item title="筛选" ref="item">
          <div>配送方式</div>
          <van-radio-group v-model="modeRadio">
            <van-radio
              name="1"
              v-for="item of modes"
              :key="item.id"
              icon-size="24px"
              :color="item.color"
            >{{item.text}}</van-radio>
          </van-radio-group>
          <div>商家属性(可以多选)</div>
          <van-checkbox-group v-model="attrInput">
            <van-checkbox :name="item.id" v-for="item of attr" :key="item.id">
              <van-tag
                slot="icon"
                slot-scope="props"
                :color="'#'+item.icon_color"
                v-if="!props.checked"
              >{{item.icon_name}}</van-tag>
              <!-- :color="!props.checked?'#'+item.icon_color:'#000'" -->
              {{item.name}}
            </van-checkbox>
          </van-checkbox-group>
          <van-row gutter="20" class="btn">
            <van-col :span="12">
              <van-button block type="default" @click="clearSelect">清空</van-button>
            </van-col>
            <van-col :span="12">
              <van-button block type="info" @click="onConfirm">确认</van-button>
            </van-col>
          </van-row>
        </van-dropdown-item>
      </van-dropdown-menu>
    </van-sticky>
    <shop-list :shopList="shopList"></shop-list>
  </div>
</template>

<script>
let orderOptions = [
  { text: "智能排序", value: 4 },
  { text: "距离最近", value: 5 },
  { text: "评分最高", value: 3 },
  { text: "起送价最低", value: 1 },
  { text: "配送速度最快", value: 2 },
  { text: "评分最高", value: 6 },
];
import shopList from "@/components/common/shoplist.vue";
export default {
  name: "food",
  data() {
    return {
      orderOptions,
      CategoryList: [],
      //列表
      dropdownValue: this.$route.query.title, //商店类型
      dropdownValue2: 4,
      shopList: [],
      modes: [], //商品配送方式列表
      attr: [], //属性列表
      modeRadio: [], //配送方式单选框
      attrInput: [], //分类复选框
    };
  },
  components: {
    shopList,
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    async getCategory() {
      //获取商品分类数据
      const geohash = this.$route.query.geohash.split(",");
      const { data: res } = await this.$axios.get(
        "shopping/v2/restaurant/category",
        {
          params: {
            latitude: geohash[0],
            longitude: geohash[1],
          },
        }
      );
      res.forEach((element) => {
        element.text = element.name;
        element.value = element.name;
        element.icon =
          "https://fuss10.elemecdn.com/b/ff/533cf9617bd57fe1dfb05603bebcfpng.png";
      });
      this.CategoryList = res;
    },
    async getRestaurants() {
      //商铺数据
      const geohash = this.$route.query.geohash.split(",");
      const { data: res } = await this.$axios.get("shopping/restaurants", {
        params: {
          latitude: geohash[0],
          longitude: geohash[1],
          order_by: this.dropdownValue2,
          restaurant_category_ids: this.dropdownValue,
          delivery_mode: this.modeRadio,
          support_ids: this.attrInput,
        },
      });
      this.shopList = res;
    },
    async Getmodes(info) {
      //商铺数据和商家属性
      const geohash = this.$route.query.geohash.split(",");
      const { data: res } = await this.$axios.get(
        `shopping/v1/restaurants/${info}`,
        {
          params: {
            latitude: geohash[0],
            longitude: geohash[1],
          },
        }
      );
      if (info === "delivery_modes") {
        this.modes = res;
      } else {
        this.attr = res;
      }
    },
    onConfirm() {
      this.$refs.item.toggle(); //隐藏下拉框
      this.getRestaurants();
      window.console.log(this.modeRadio);
      window.console.log(this.attrInput);
    },
    clearSelect() {
      //清空选择框
      this.$refs.item.toggle(); //隐藏下拉框
      this.modeRadio = [];
      this.attrInput = [];
      this.getRestaurants();
    },
  },
  created() {
    this.getCategory();
    this.getRestaurants();
    this.Getmodes("delivery_modes"); //分类
    this.Getmodes("activity_attributes"); //属性
  },
};
</script>

<style lang="stylus" scoped>
@import '../../assets/css/common.styl';

.van-nav-bar {
  background-color: $bg-color;
}

.van-nav-bar__title {
  font-weight: 700;
}

.van-nav-bar__text, .van-nav-bar__title, .van-icon-arrow-left {
  color: #fff;
}

.shoplist {
  margin-top: 0;
}

.btn {
  padding: 0.2rem;
  background-color: #eee;
}

.van-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 20px;

  .van-checkbox {
    width: 31%;
    padding: 3px;
    margin-bottom: 3px;
    border-radius: 3px;
    border: 1px solid #eee;
  }
}
</style>